import {subclass, declared, property} from "esri/core/accessorSupport/decorators";
import { renderable, tsx } from "esri/widgets/support/widget";
import watchUtils = require("esri/core/watchUtils");

// 引用基础微件类
import Widget from "esri/widgets/Widget";

@subclass("esri.widgets.HelloWorld")
class HelloWorld extends declared(Widget) {
    // 创建name属性，并赋予默认值
    @property()
    @renderable()
    name: string = "John Smith";

    // 创建所需的方法函数
    private _onNameUpdate(): string { return `${this.name}`; }

    constructor(prop: any) {
        super(prop);
        this._onNameUpdate = this._onNameUpdate.bind(this);
    }

    postInitialize() {
        // 创建监听处理，指定监听对象、监听属性以及处理函数
        const handle = watchUtils.init(this, "name", this._onNameUpdate);

        // 指定监听处理的管理对象为this，即自身。这样一来，当微件释放时，函数监听也会一并释放
        this.own(handle);
    }

    // 渲染函数
    render() {
        return (
            <div>
                {this._onNameUpdate()}
            </div>
        );
    }
}

export = HelloWorld;